<template>
  <div class="login-container">
    <video
      class="video"
      src="../../assets/video/bg-video.mp4"
      preload="auto"
      loop="loop"
      autoplay="true"
      muted="muted"
    ></video>
    <!-- 常规登入 -->
    <el-form
      :model="loginForm"
      status-icon
      :rules="rules"
      ref="loginForm"
      label-width="100px"
      class="login-loginForm"
    >
      <h1 class="title">管理系统</h1>
      <i
        @click="isErweiLogin = !isErweiLogin"
        :class="[
          'jiaobiao',
          'iconfont',
          isErweiLogin ? 'icon-diannao' : 'icon-erweima',
        ]"
      ></i>
      <div class="common-login" v-if="!isErweiLogin">
        <el-form-item label="用户名" prop="username">
          <el-input
            type="text"
            v-model="loginForm.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="loginForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="验证码" prop="captcha">
          <el-input v-model.number="loginForm.captcha"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('loginForm')"
            >提交</el-button
          >
        </el-form-item>
      </div>

      <!-- 切换二维码登入 -->
      <div class="erwei" v-else>123</div>
    </el-form>
  </div>
</template>
<script>
var validateCaptcha = (rule, value, callback) => {
  //callback只要传参了，表示表单验证不通过，不传参表示表单验证通过
  //value就是在input中的输入值
  //rule是个对象，就是验证对象
  if (!value) {
    callback("必须输入验证码");
  } else {
    callback;
  }
};
var validateUsername = (rule, value, callback) => {
  //callback只要传参了，表示表单验证不通过，不传参表示表单验证通过
  //value就是在input中的输入值
  //rule是个对象，就是验证对象
  var reg = /^\w{3,12}$/;
  if (reg.test(value)) {
    //验证通过
    callback();
  } else {
    callback("用户名可以是字母、数字、下划线,3-12位");
  }
};
var validatePass = (rule, value, callback) => {
  //callback只要传参了，表示表单验证不通过，不传参表示表单验证通过
  //value就是在input中的输入值
  //rule是个对象，就是验证对象
  var reg = /^[a-zA-Z]{1,9}$/;
  if (reg.test(value)) {
    //验证通过
    callback();
  } else {
    callback("只能由字母组成，1-9位");
  }
};
export default {
  data() {
    return {
      isErweiLogin: false, //是否是二维码登入
      loginForm: {
        username: "",
        password: "",
        captcha: "",
      },
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        captcha: [{ validator: validateCaptcha, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style scoped lang="less">
.login-container {
  /deep/ .jiaobiao {
    font-size: 80px;
    color: #fff;
    position: absolute;
    left: -1px;
    top: -1px;
    cursor: pointer;
    opacity: 0.7;
  }
  .video {
    // height: 100%;
    // width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
  .el-form {
    position: fixed;
    right: 65%;
    top: 25%;
    // color: #fff;
    border-radius: 5px;
    width: 400px;
    background-color: rgba(0, 0, 0, 0.3);
    padding-top: 100px;
    padding-right: 26px;
    padding-bottom: 50px;
    padding-left: 0px;
    // padding: 30px, 26px, 66px, 0;
    /deep/ .el-input__inner {
      width: 250px;
    }
    .el-button--primary {
      background: linear-gradient(90deg, #1596fb, #002dff);
      width: 250px;
    }
    /deep/ .el-form-item__label {
      color: #fff;
    }
  }
  .title {
    margin: 0 0 60px 0;
    text-align: center;
    color: #fff;
  }
}
</style>
